import {
  Button,
  Card,
  Select,
  Slider,
  type ThemeName,
  ThemeProvider,
  useTheme,
} from '@nikki/ui-lib'
import type React from 'react'
import { useState } from 'react'
import styles from './styles/App.module.less'

const AppContent: React.FC = () => {
  const { themeName, setTheme, theme } = useTheme()
  const [sliderValue, setSliderValue] = useState(50)
  const [sliderValue2, setSliderValue2] = useState(75)
  const [selectedValue, setSelectedValue] = useState<string | number>()
  const [selectedValue2, setSelectedValue2] = useState<string | number>('option2')

  // 添加调试信息
  console.log('当前主题:', themeName)

  // 动态样式
  const appStyle = {
    '--app-background': theme.colors.background.primary,
    '--app-header-bg': 'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 240, 245, 0.8) 100%)',
    '--app-title-color': theme.colors.text.primary,
    '--app-subtitle-color': theme.colors.text.secondary,
    '--app-card-shadow': theme.colors.shadow.primary,
    '--app-demo-title-color': theme.colors.primary.light,
    '--app-slider-text-color': theme.colors.primary.light,
    '--app-select-text-color': theme.colors.primary.light,
    '--theme-primary-light-rgb': themeName === 'pink' ? '255, 105, 180' : 
                               themeName === 'blue' ? '70, 130, 180' : 
                               '147, 112, 219',
  } as React.CSSProperties

  const themeOptions = [
    { value: 'pink', label: '🌸 梦幻粉色' },
    { value: 'blue', label: '💎 梦幻蓝色' },
    { value: 'purple', label: '💜 梦幻紫色' },
  ]

  const options = [
    { value: 'option1', label: '梦幻粉色' },
    { value: 'option2', label: '柔和紫色' },
    { value: 'option3', label: '清新绿色' },
    { value: 'option4', label: '明亮黄色' },
  ]

  const options2 = [
    { value: 1, label: '小尺寸' },
    { value: 2, label: '中尺寸' },
    { value: 3, label: '大尺寸' },
    { value: 4, label: '特大尺寸', disabled: true },
  ]

  return (
    <div className={`${styles.app} ${styles[`theme-${themeName}`]}`} style={appStyle}>
      <header className={styles.header}>
        <h1>Nikki UI Components</h1>
        <p>无限暖暖风格的梦幻UI组件库</p>
        <div className={styles.themeSelector}>
          <span>主题切换：</span>
          <Select
            options={themeOptions}
            value={themeName}
            onChange={(value) => {
              console.log('切换主题到:', value)
              setTheme(value as ThemeName)
            }}
            size="small"
            variant="outline"
            glow
          />
          <div style={{ marginLeft: '10px', fontSize: '12px', color: '#666' }}>
            当前: {themeName}
          </div>
        </div>
      </header>

      <main className={styles.main}>
        <Card className={styles.demoCard}>
          <h2>✨ 梦幻按钮展示</h2>
          <div className={styles.buttonGroup}>
            <Button variant="primary" glow>
              ✨ 主要按钮
            </Button>
            <Button variant="secondary">💫 次要按钮</Button>
            <Button variant="outline">🌸 轮廓按钮</Button>
          </div>
          <div className={styles.buttonGroup}>
            <Button variant="primary" size="small">
              小巧按钮
            </Button>
            <Button variant="primary" size="medium">
              中等按钮
            </Button>
            <Button variant="primary" size="large" glow>
              大型按钮
            </Button>
          </div>
        </Card>

        <Card className={styles.demoCard}>
          <h2>🎚️ 梦幻滑块展示</h2>
          <div className={styles.sliderGroup}>
            <div className={styles.sliderItem}>
              <div>基础滑块: {sliderValue}</div>
              <Slider value={sliderValue} onChange={setSliderValue} glow />
            </div>
            <div className={styles.sliderItem}>
              <div>自定义范围: {sliderValue2}</div>
              <Slider
                value={sliderValue2}
                onChange={setSliderValue2}
                min={0}
                max={200}
                step={10}
                glow
              />
            </div>
            <div className={styles.sliderItem}>
              <div>禁用状态</div>
              <Slider defaultValue={30} disabled />
            </div>
          </div>
        </Card>

        <Card className={styles.demoCard}>
          <h2>📋 梦幻下拉选择展示</h2>
          <div className={styles.selectGroup}>
            <div className={styles.selectItem}>
              <div>基础下拉: {selectedValue || '未选择'}</div>
              <Select
                options={options}
                value={selectedValue}
                onChange={setSelectedValue}
                placeholder="请选择颜色"
                glow
              />
            </div>
            <div className={styles.selectItem}>
              <div>默认值下拉: {selectedValue2 || '未选择'}</div>
              <Select
                options={options}
                value={selectedValue2}
                onChange={setSelectedValue2}
                variant="secondary"
              />
            </div>
            <div className={styles.selectItem}>
              <div>禁用状态</div>
              <Select options={options} defaultValue="option1" disabled />
            </div>
            <div className={styles.selectItem}>
              <div>不同尺寸</div>
              <div style={{ display: 'flex', gap: '10px', marginTop: '10px' }}>
                <Select options={options2} size="small" variant="outline" />
                <Select options={options2} size="medium" variant="outline" />
                <Select options={options2} size="large" variant="outline" />
              </div>
            </div>
          </div>
        </Card>
      </main>
    </div>
  )
}

const App: React.FC = () => {
  return (
    <ThemeProvider theme="pink">
      <AppContent />
    </ThemeProvider>
  )
}

export default App
